<template>
  <div>
    <!-- 标题栏 -->
    <van-nav-bar
      @click-right="onClickRight"
      border
      class="nav"
      title="个人中心"
    >
      <template #right>
        <router-link to="#"
          ><i class="iconfont icon-customer-1"></i
        ></router-link>
      </template>
    </van-nav-bar>
    <div class="thead">
      <div class="circle">
        <!-- 登录 -->
        <div v-if="$store.state.user.loginStatus">
          <!-- 非vip -->
          <div v-if="!userInfo.isVip" class="notvip">
            <div class="avtmes">
              <div
                id="avatar"
                @click="$router.push('/updatemsg')"
                class="avatar"
              >
                <img :src="urlSrcShow" />
                <!-- <img src="/img/000.jpg" alt="" /> -->
                <!-- <img :src="`http://localhost:3000/${userInfo.avatar}`" alt="" /> -->
              </div>
              <span>{{ userInfo.nickName }}</span>
            </div>
            <div class="card">
              <div class="tvip">
                <span class="v">vip</span><span>会员卡</span>
              </div>
              <span class="tt">现在充值,立享VIP特权及海量优惠~</span>
              <button>立即开通</button>
            </div>
          </div>
          <!-- vip -->
          <div v-else class="vip">
            <div class="card">
              <div class="avtmes">
                <div
                  id="avatar"
                  @click="$router.push('/updatemsg')"
                  class="avatar"
                >
                  <img :src="urlSrcShow" alt="" />
                </div>
                <span id="vipName">{{ userInfo.nickName }}</span>
              </div>
              <div class="tvip">
                <span class="v">vip2</span><span>会员卡</span>
              </div>
              <span class="tt">有效期至2022-12-12~</span>
              <button>立即续费</button>
            </div>
          </div>
        </div>
        <!-- 未登录 -->
        <div v-else class="unsucc">
          <router-link to="/login">登录/注册</router-link>
        </div>
      </div>
    </div>
    <div class="section">
      <div class="tip">
        <div>
          <i class="iconfont icon-dingdan"></i>
          <span>订单</span>
        </div>
        <div>
          <i class="iconfont icon-wodeyuyue"></i>
          <span>预约</span>
        </div>
        <div>
          <i class="iconfont icon-pinglun"></i>
          <span>评价</span>
        </div>
        <div>
          <i class="iconfont icon-wenti"></i>
          <span>关于</span>
        </div>
      </div>
      <div class="tipb">
        <ul>
          <li @click="gocollectList">
            <i class="iconfont icon-shoucang_o"></i><span>我的收藏</span>
          </li>
          <li><i class="iconfont icon-add"></i><span>我的地址</span></li>
          <li @click="$router.push('/gobuyvip')">
            <i class="iconfont icon-shangpin"></i><span>会员好礼</span>
          </li>
          <li>
            <i class="iconfont icon-shenhemokuai"></i><span>问题反馈</span>
          </li>
          <li @click="$router.push('/updatemsg')">
            <i class="iconfont icon-bianji"></i><span>编辑资料</span>
          </li>
          <li><i class="iconfont icon-shezhi"></i><span>主题色设置</span></li>
        </ul>
      </div>
      <div v-if="$store.state.user.loginStatus" class="tc" @click="out">
        <button>退出登录</button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import { MessageBox } from "mint-ui";
export default {
  computed: {
    ...mapState("user", [
      "loginStatus",
      "userInfo",
      "urlSrcAdd",
      "urlSrcDefaul",
    ]),
    urlSrcShow() {
      if (!this.userInfo.avatarDef) {
        console.log(`${this.urlSrcAdd}${this.userInfo.avatar}`);
        return `${this.urlSrcAdd}${this.userInfo.avatar}`;
      } else {
        console.log(this.urlSrcDefaul);
        return this.urlSrcDefaul;
      }
    },
  },
  methods: {
    onClickRight() {
      this.$router.push("/customer");
    },
    ...mapMutations("user", ["logout"]),
    out() {
      console.log(this.$store);
      MessageBox.confirm("确定执行此操作?")
        .then(action => {
          this.logout();
          // this.$router.push("/home/me");
        })
        .catch(err => {
          console.log(err);
        });
    },
    gocollectList() {
      this.$router.push("/collectlist");
    },
  },
};
</script>

<style src="../../public/css/me.scss" lang="scss" scoped></style>
